import React from 'react'

interface SettingsButtonProps {
  onClick: () => void
  isOpen: boolean
  buttonRef: React.RefObject<HTMLButtonElement>
  className?: string
}

/**
 * 设置按钮组件
 * 触发设置面板的显示/隐藏
 */
export const SettingsButton: React.FC<SettingsButtonProps> = ({
  onClick,
  isOpen,
  buttonRef,
  className = ''
}) => {
  return (
    <button
      ref={buttonRef}
      onClick={onClick}
      className={`settings-button ${isOpen ? 'active' : ''} ${className}`}
      title="弹幕设置"
      style={{
        background: isOpen ? '#007bff' : '#6c757d',
        color: 'white',
        border: 'none',
        borderRadius: '6px',
        padding: '8px 12px',
        cursor: 'pointer',
        fontSize: '14px',
        fontWeight: '500',
        transition: 'all 0.2s ease',
        display: 'flex',
        alignItems: 'center',
        gap: '6px',
        boxShadow: isOpen ? '0 2px 8px rgba(0, 123, 255, 0.3)' : '0 1px 3px rgba(0, 0, 0, 0.2)',
        transform: isOpen ? 'scale(1.05)' : 'scale(1)',
      }}
      onMouseEnter={(e) => {
        if (!isOpen) {
          e.currentTarget.style.background = '#5a6268'
          e.currentTarget.style.transform = 'scale(1.02)'
        }
      }}
      onMouseLeave={(e) => {
        if (!isOpen) {
          e.currentTarget.style.background = '#6c757d'
          e.currentTarget.style.transform = 'scale(1)'
        }
      }}
    >
      <span style={{ fontSize: '16px' }}>⚙️</span>
      <span>设置</span>
    </button>
  )
}

export default SettingsButton
